---
layout: examples
title: SUI Mobile Demo
---
<nav class="bar bar-tab">
  <a class="tab-item" href="/examples/baichuan/home" data-transition='slide-out'>
    <span class="icon icon-home"></span>
    <span class="tab-label">首页</span>
  </a>
  <a class="tab-item active" href="#">
    <span class="icon icon-app"></span>
    <span class="tab-label">商品</span>
  </a>
  <a class="tab-item" href="/examples/baichuan/settings" data-transition='slide-in'>
    <span class="icon icon-me"></span>
    <span class="tab-label">我的</span>
  </a>
</nav>
<div class="content page-goods infinite-scroll" id='goods-page'>
  <div class="swiper-container swiper-container-horizontal" data-space-between="10">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class='card-cover' src="//gdp.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class='card-cover' src="//gdp.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class='card-cover' src="//gdp.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_640x640.jpg" alt="">
      </div>
    </div>
    <div class="swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
  </div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="/examples/baichuan/detail" class="item-link item-content" data-transition='slide-in'>
          <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">ROZENE家纺床品</div>
              <div class="item-after">$120</div>
            </div>
            <div class="item-subtitle">月销203笔</div>
            <div class="item-text">ROZENE春纯棉四件套 床上春夏 床单被套四件套全棉天丝四件套春夏</div>
          </div>
        </a>
      </li>
      <li>
        <a href="/examples/baichuan/detail" class="item-link item-content" data-transition='slide-in'>
          <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">美式床品套件</div>
              <div class="item-after">$150</div>
            </div>
            <div class="item-subtitle">月销145笔</div>
            <div class="item-text">Roz居家美式高档床上用品纯棉4四件套全棉床单被套1.8m床上四件套</div>
          </div>
        </a>
      </li>
      <li>
        <a href="/examples/baichuan/detail" class="item-link item-content" data-transition='slide-in'>
          <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_240x240.jpg" width="80"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Rozene居家馆</div>
              <div class="item-after">$120</div>
            </div>
            <div class="item-subtitle">月销345笔</div>
            <div class="item-text">Rozen 高档家纺品牌 床上用品夏100%天丝四件套 夏季贡缎欧美式</div>
          </div>
        </a>
      </li>
      <li>
        <a href="/examples/baichuan/detail" class="item-link item-content" data-transition='slide-in'>
          <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">ROZENE家纺床品</div>
              <div class="item-after">$120</div>
            </div>
            <div class="item-subtitle">月销203笔</div>
            <div class="item-text">ROZENE春纯棉四件套 床上春夏 床单被套四件套全棉天丝四件套春夏</div>
          </div>
        </a>
      </li>
      <li>
        <a href="/examples/baichuan/detail" class="item-link item-content" data-transition='slide-in'>
          <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">美式床品套件</div>
              <div class="item-after">$150</div>
            </div>
            <div class="item-subtitle">月销145笔</div>
            <div class="item-text">Roz居家美式高档床上用品纯棉4四件套全棉床单被套1.8m床上四件套</div>
          </div>
        </a>
      </li>
      <li>
        <a href="/examples/baichuan/detail" class="item-link item-content" data-transition='slide-in'>
          <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_240x240.jpg" width="80"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Rozene居家馆</div>
              <div class="item-after">$120</div>
            </div>
            <div class="item-subtitle">月销345笔</div>
            <div class="item-text">Rozen 高档家纺品牌 床上用品夏100%天丝四件套 夏季贡缎欧美式</div>
          </div>
        </a>
      </li>

    </ul>
  </div>
  <div class="infinite-scroll-preloader">
    <div class="preloader"></div>
  </div>
</div>
